<template>
  <div class="upmenu">
    <!-- 上传菜谱 -->
    <div class="sharemenu">
      <div class="smtitle">
        <span>发布菜谱</span>
        <p>分享点滴生活，让枯燥的厨房生活变得丰富有趣！</p>
      </div>
      <div class="addtitle">
        <i class="fa fa-bars text-success" aria-hidden="true"></i>
        <span>菜谱名称</span>
        <form action="#" id="imformation" :model="form"></form>
        <input
          type="text"
          size="50"
          placeholder="请输入菜谱名称"
          form="imformation"
          v-model="form.upmenutitle"
        />
      </div>
      <div class="addimg">
        <i class="fa fa-camera text-success" aria-hidden="true"></i>
        <span>上传成品图</span>
        <div class="addimgword">
          <div class="addimgwordimg">
            <el-upload
              class="upload-demo"
              ref="upload"
              list-type="picture-card"
              action="http://localhost:3000/share/upmenu"
              :limit="1"
              :before-upload="beforeupload"
              :auto-upload="false"
              :multiple="true"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <textarea
            name
            id
            cols="70"
            rows="13"
            form="imformation"
            placeholder="分享菜谱背后的事故吧"
            v-model="form.upmenustory"
          ></textarea>
        </div>
      </div>
      <div id='buttoncss'>
        <button class="btn btn-success" form="imformation" @click.prevent='onSubmit'>提交故事</button>
        <button class="btn btn-success btnstep" form="imformation" @click.prevent='ab'>显示步骤</button>
      </div>
      <hr style="width:780px">
      <hr style="width:780px">
      <hr style="width:780px">
      <upmenustep :sflag='flag' :slocaluserid='localuserid'></upmenustep>
    </div>
  </div>
</template>
<script>
import Upmenustep from "../components/Upmenustep.vue";
export default {
  data() {
    return {
      flag:false,
      localuserid: "",
      // company_id: "10001",
      // company_id: "1",
      fileList: [],
      form: {
        name: "", //绑定表单元素的属性
        upmenutitle: "",
        upmenustory: ""
      },
      param: "" // 表单最后提交的参数对象
    };
  },
  components: {
    Upmenustep
  },
  created() {
    // 用户ID查看接口调用
    this.$axios
      .get("http://localhost:3000/users/personal")
      .then(res => {
        this.localuserid = res.data.data[0].userId;
        console.log(res.data)
        // console.log(this.localuserid)
        // console.log(res.data.data[0].userId)
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods: {
    ab(){
      this.flag=true;
    },
    onSubmit() {
      let _this = this;
      var upmenutitles = _this.form.upmenutitle;
      var upmenustorys = _this.form.upmenustory;
      var touserid = 1;
      this.$refs.upload.submit();
      //将非表单元素的数据也添加到参数对象中；
      this.param.append("touserId", _this.localuserid);
      //将表单元素的数据也添加到参数对象中；
      this.param.append("upmenuTitle", upmenutitles);
      this.param.append("story", upmenustorys);
      //设置提交请求头，适用于上传文件
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      // //调用接口，执行上传所有数据的操作
      this.$axios
        .post("http://localhost:3000/share/upmenu", this.param, config)
        .then(function(result) {
          console.log("result", result);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //当上传文件组件submit之前触发执行
    beforeupload(file) {
      this.param = new FormData();
      this.param.append("finishPic", file);
      return false;
    }
  }
};
</script>
<style lang="css" scoped>
/* 上传菜谱 */
.sharemenu {
  width: 70%;
  min-width: 800px;
  /* border:1px solid red; */
  /* height: 1000px; */
  position: relative;
  left: 130px;
  margin: 0 auto;
  background-color: rgba(245, 247, 242,0.5);
}

.smtitle {
  margin-top: 20px;
  height: 70px;
  /* background-color: yellow; */
}

.smtitle span {
  font-size: 17px;
  color: #888;
  display: block;
  height: 40px;
  line-height: 40px;
  /* background-color: red; */
  /* border-bottom: 1px solid #ccc; */
}

.smtitle p {
  padding-top: 2px;
  font-size: 12px;
  color: grey;
}

/* 添加菜谱名称 */
.addtitle span {
  font-weight: bold;
}

/* form{
            width: 100%;
        } */
[type="text"] {
  margin-right: 20px;
}

/* 上传成品图 */
.addimg {
  margin-top: 20px;
  width: 100%;
  height: 350px;
  /* border:1px solid green; */
}

.addimg span {
  font-weight: bold;
}

.addimgword {
  margin-top: 5px;
}

.addimgwordimg {
  width: 250px;
  height: 321px;
  float: left;
  border: 1px solid #ccc;
}

.addimgword textarea {
  float: left;
}

.addimgword input {
  display: none;
}
#buttoncss{
  height: 30px;
  /* border:1px solid red; */
}
.btnstep{
  margin-left:30px;
}


/* 步骤 */
/* .step {
  width: 100%;
  height: 900px;
}

.step table tr {
  padding: 50px;
}

.steptitle span {
  font-weight: bold;
}

.stepnumber {
  height: 180px;
  width: 100px;
  font-size: 60px;
  color: grey;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
  line-height: 180px;
}

.stepwordimg {
  height: 180px;
  width: 180px;
} */
/* 上传图片 */
</style>